<template>
	<view>
		<view class="loader-wrapper">
			<view class="loader">
				<image src="../../static/logo.png"></image>
			</view>
			<div class="loader-text step">
				<span style="--i:1">拼</span>
				<span style="--i:2">命</span>
				<span style="--i:3">加</span>
				<span style="--i:4">载</span>
				<span style="--i:5">中</span>
				<span style="--i:6">.</span>
				<span style="--i:7">.</span>
				<span style="--i:8">.</span>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'loadingMore',
		props: {
			loadingning: {
				type: Boolean,
				default: true,
			},
			zIndex: {
				type: Number,
				default: 10000,
			},

			loadingText: {
				type: String,
				default: '页面加载中...'
			}
		},
		data() {
			return {

			}
		},

		onLoad(option) {

		},
		methods: {

		}
	}
</script>

<style>
	* {
		/* 初始化 */
		margin: 0;
		padding: 0;
	}

	body {
		/* 100%窗口高度 */
		height: 100vh;
	}

	.loader-wrapper {
		/* 固定定位 */
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		/* 溢出隐藏 */
		overflow: hidden;
		/* 渐变背景 */
		background: linear-gradient(45deg, rgb(90, 54, 148) 0%, rgb(19, 189, 206) 33%, rgb(0, 148, 217) 66%, rgb(111, 199, 181) 100%);
		background-size: 400%;
		background-position: 0% 100%;
		/* 执行渐变背景动画：动画名 时长 加速后减速 无限次播放 */
		animation: gradient 7.5s ease-in-out infinite;
	}

	/* 旋转loading的外圈 */
	.loader {
		width: 70px;
		height: 70px;
		/* border: 1px solid red; */
		/* 相对定位 居中 */
		position: relative;
		left: 50%;
		top: 45%;
		margin-left: -35px;
		margin-top: -35px;
		z-index: 2;
		border-radius: 50%;
		overflow: hidden;
		border: 3px solid transparent;
		border-top-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 执行旋转动画 */
		animation: spin 1.7s linear infinite;
	}

	/* 旋转loading的中圈 */
	.loader::before {
		content: "";
		/* 绝对定位 */
		position: absolute;
		top: 5px;
		left: 5px;
		bottom: 5px;
		right: 5px;
		border-radius: 50%;
		/* border: 1px solid red; */
		border: 3px solid transparent;
		border-top-color: #fff;
		/* 执行反向旋转动画 reverse:反向 */
		animation: spin 0.6s linear infinite reverse;
	}

	/* 旋转loading的内圈 */
	.loader::after {
		content: "";
		position: absolute;
		top: 15px;
		left: 15px;
		bottom: 15px;
		right: 15px;
		border-radius: 50%;
		/* border: 1px solid red; */
		border: 3px solid transparent;
		border-top-color: #fff;
		/* 执行旋转动画 */
		animation: spin 1s linear infinite;
	}

	/* logo */
	.loader image {
		/* display: none; */
		width: 40%;
		height: 40%;
		border-radius: 50%;
		/* 执行反向旋转动画，时长必须和外圈的动画一致（不让其跟着旋转） */
		animation: spin .7s linear infinite reverse;
	}
	/* loading文字 */
	.loader-text {
		width: 100%;
		height: 24px;
		text-align: center;
		/* 绝对定位 水平居中 */
		position: absolute;
		top: 48%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 3;
		/* 防止选取 */
		user-select: none;
	}
	.step {
		position: relative;
		-webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
	}
	
	.step span {
		position: relative;
		display: inline-block;
		color: #fff;
		font-size: 12px;
		animation: animate 1s ease-in-out infinite;
		animation-delay: calc(.1s*var(--i))
	}
	
	@keyframes animate {
		0% {
			transform: translateY(0px)
		}
	
		20% {
			transform: translateY(-24px)
		}
	
		40%,
		100% {
			transform: translateY(0px)
		}
	}

	/* 定义动画 */
	/* 背景渐变 */
	@keyframes gradient {
		50% {
			background-position: 100% 0%;
		}
	}

	/* 旋转 */
	@keyframes spin {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* 文字移动 */
	@keyframes move {
		0% {
			right: 0;
			opacity: 0;
		}

		35% {
			right: 41%;
			opacity: 1;
			transform: rotate(0);
		}

		65% {
			right: 59%;
			opacity: 1;
			transform: rotate(0);
		}

		100% {
			right: 100%;
			transform: rotate(-180deg);
		}
	}
</style>